//原料首页
<template>
    <div>
        <div class="header">
            <i class="fa fa-volume-up" aria-hidden="true"></i>
            <span>有新消息</span>
        </div>
        <div class="msg-container">
            <p v-for="(item,index) in msg_data" :key="index">{{index+1}} {{item}}</p>

        </div>
        <div class="pro">
            <div>
                <!--<mt-button type="primary">今日生产</mt-button>-->
                <mt-badge size="large">今日生产</mt-badge>
            </div>
            <div class="flex-1">
                <div>
                    <table class="table table-border">
                        <thead>
                        <tr>
                            <th style="width: 30%;">单位</th>
                            <th style="width: 40%;">低料位次数</th>
                            <th>高料位次数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>6炉</td>
                            <td>{{six_low_data}}</td>
                            <td>{{six_height_data}}</td>
                        </tr>
                        <tr>
                            <td>7炉</td>
                            <td>{{seven_low_data}}</td>
                            <td>{{seven_height_data}}</td>
                        </tr>
                        <tr>
                            <td>8炉</td>
                            <td>{{eight_low_data}}</td>
                            <td>{{eight_height_data}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-border">
                        <thead>
                        <tr>
                            <th style="width: 30%;">单位</th>
                            <th style="width: 40%;">满仓数</th>
                            <th>总满仓数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>5烧成</td>
                            <td>{{five_fire_low_data}}</td>
                            <td rowspan="2">{{five_fire_low_data}}</td>
                        </tr>
                        <tr>
                            <td>6烧成</td>
                            <td>{{six_low_data}}</td>
                            <!--<td></td>-->
                        </tr>
                        </tbody>
                    </table>

                </div>
                <div>
                    <p>矿低库存{{low_data}}种</p>
                    <p>煤低库存{{coal_low_data}}种</p>
                    <p>落地矿{{ Ground_mine}}顿</p>


                </div>
            </div>

        </div>
    </div>
</template>

<script>
    //   import echarts from "echarts";

    export default {
        name: "materialHome",
        data() {
            return {
                msg_data: ['供料四号电机温度过高', 'A6皮带严重跑偏，急需处理', 'pt分用量过大，库存天数26天','供料四号电机温度过高', 'A6皮带严重跑偏，急需处理', 'pt分用量过大，库存天数26天','供料四号电机温度过高', 'A6皮带严重跑偏，急需处理', 'pt分用量过大，库存天数26天','供料四号电机温度过高', 'A6皮带严重跑偏，急需处理', 'pt分用量过大，库存天数26天'],
                six_low_data: 12,
                six_height_data: 13,
                seven_low_data: '12',
                seven_height_data: 13,
                eight_low_data: 13,
                eight_height_data: 15,
                five_fire_low_data: 15,
                five_fire_height_data: 16,
                six_fire_low_data: 15,
                six_fire_height_data: 16,
                low_data: 13,
                coal_low_data: 16,
                Ground_mine: 20


            };
        },
        mounted() {

        }
    };
</script>

<style lang="scss" scoped>
    .header {
        padding: 5px;
        & > span {
            background: aqua;
        }
    }

    .msg-container {
        width: 100%;
        height: 200px;
        border: 1px solid #ddd {
            left: none;
            right: none;
        };
        overflow: auto;
        box-sizing: border-box;
    }

    .msg-container {
        margin-bottom: 20px;
        & > p {
            line-height: 30px;
            padding-left: 5px;
        }
    }

    .flex-1 {
        display: flex;
        div:nth-child(1) {
            flex: 4;
        }
        div:nth-child(2) {
            flex: 2;
            padding: 0 5px;
            /*display: flex;*/
            -webkit-align-items: center;
            align-items: center;
            & > p {
                width: 100%;
                text-align: center;
                border: 1px solid #888;
                box-sizing: border-box;
                height: 30px;
                line-height: 30px;

            }
            p:nth-child(2) {
                margin-top: 40px;
            }
            p:nth-child(3) {
                margin-top: 40px;
            }

        }
    }

    .pro {
        & > div {
            /*margin-top: 20px;*/
            display: flex;
            justify-content: center;
        }
        div:nth-child(1) {
            margin-bottom: 20px;
            /*margin-top: 20px;*/
        }
    }

    .table > caption + thead > tr:first-child > td,
    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > td,
    .table > thead:first-child > tr:first-child > th {
        border-top: 1px solid #dddddd;
    }
</style>
